@include('common.header')
<link href="{{ asset('/css/font-awesome.min.css') }}" rel="stylesheet">
<link href="{{ asset('/css/daterangepicker-bs3.css') }}" rel="stylesheet">
<script src=" {{ asset('/js/moment.js') }} "></script>
<script src=" {{ asset('/js/daterangepicker.js') }} "></script>
<script>
	// 查询销售数据
	function search()
	{
		var date = $("#reservation").val();
		$.ajax({
			type:"post",
			url:"{{ url('/search') }}",
			data:{date:date,_token:_token},
			async:false,   // 同步操作						
			dataType: "html",
			beforeSend:function()
			{
				$("#return").html("<div style='margin-left:20px;font-size:20px;color:green;' >正在查询...</div>");
			},
			success:function( back )
			{
				$("#return").html('');
				$("#return").append( back );
			}
		});
	}
</script>


<div style="float:left;margin-top:5%;width:100%;height:auto;"   >

	<div style="float:left;margin-left:2%;margin-top:1%;margin-bottom:2%;width:35%;height:auto;"   >
		<!-- 订单数据 -->
		@forelse( $data as $key => $info )
		<div style="float:left;margin-top:5%;margin-bottom:1%;width:100%;height:auto;">
			@forelse( $info as $ke => $in )
				@if( $key=='today' || $key=='month' )
				<div  style="float:left;margin-left:3%;width:180px;height:80px;background-color:orange;">
				@else
				<div  style="float:left;margin-left:3%;width:180px;height:80px;background-color:#FF4500;">
				@endif
					<div style="float:left;width:180px;height:39px;font-size:29px;text-align:center;color:white;margin-top:10px;" >
						{{ $in['num'] }}
					</div>
					<div style="float:left;width:180px;height:35px;font-size:15px;text-align:center;color:white;" >
						{{ $in['desc'] }}
					</div>
				</div>
			@empty
			@endforelse
		</div>
		@empty
		@endforelse
	</div>
	
	<!-- 日期插件 -->
	<div style="float:left;margin-top:3%;width:60%;height:auto;"   >
		<div class="container" style="float:left;width:40%;" >
			
			<div class="span12" >
				<div class="well" style="width:280px;">
					<form class="form-horizontal">
						<fieldset>
							<div class="control-group">
								<div class="controls">
									<div class="input-prepend input-group">
									<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
									<input type="text" readonly style="width: 200px" name="reservation" id="reservation" class="form-control" value="2017-08-18 - 2017-09-15" /> 
									</div>
								</div>
							</div>
						</fieldset>
					</form>
					<script type="text/javascript">
						$(document).ready(function(){
							$('#reservation').daterangepicker(null, function(start, end, label){
								console.log(start.toISOString(), end.toISOString(), label);
							});
						});
					</script>
				</div>
			</div>
		</div>
		<button class="btn btn-success" style="float:left;margin-top:20px;width:80px;cursor:pointer;" onclick="search();" >查询</button>
		
	</div>
	
	<div style="float:left;width:30%;margin-bottom:1%;height:auto;" id="return" ></div>
	
</div>

@extends('common.footer');